<template>
  <span>
    <VueCountdown :time="target" class="count-down" v-if="format === 'hh:mm:ss'">
      <template slot-scope="props">{{ props.hours }}:{{ props.minutes }}:{{ props.seconds }}</template>
    </VueCountdown>
    <VueCountdown :time="target" class="count-down" v-if="format === 's'">
      <template slot-scope="props">{{ props.seconds }} s
      </template>
    </VueCountdown>
  </span>
</template>
<script>
import VueCountdown from '@xkeshi/vue-countdown'
export default {
  name: 'CountDown',
  components: { VueCountdown },
  props: {
    target: {},
    format: {
      type: String,
      default: 'hh:mm:ss'
    }
  }
}

</script>
<style scoped>
.count-down {
  font-family: Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
}

</style>
